<template>
  <div class="rightStatistics-container">
    <!-- 投资情况 -->
    <div class="item-container tzqk">
      <div class="header">投资情况</div>
      <div class="body">
        <div class="card">
          <div class="value">
            {{ investmentSource.totalPlanInvestment || 0 }}
          </div>
          <div class="name">计划总投资（亿元）</div>
        </div>
        <div class="card">
          <div class="value">
            {{ investmentSource.totalCompleteInvestment || 0 }}
          </div>
          <div class="name">实际总投资（亿元）</div>
        </div>
        <div class="card">
          <div class="value">
            {{ investmentSource.yearPlanInvestment || 0 }}
          </div>
          <div class="name">本年度计划投资（亿元）</div>
        </div>
        <div class="card">
          <div class="value">
            {{ investmentSource.yearCompleteInvestment || 0 }}
          </div>
          <div class="name">本年度实际投资（亿元）</div>
        </div>
      </div>
    </div>

    <!-- 问题统计 -->
    <div class="item-container">
      <div class="header">问题统计</div>
      <div class="body">
        <div class="unit">单位：个</div>
        <div class="statistics-warp">
          <!-- 问题总数 -->
          <div class="statistics-card">
            <div class="icon"></div>
            <div class="desc">
              <div class="name">问题总数</div>
              <div class="value">
                {{ problemSource.total || 0 }}<span>个</span>
              </div>
            </div>
          </div>
          <!-- 处理总数 -->
          <div class="statistics-card">
            <div class="icon"></div>
            <div class="desc">
              <div class="name">处理总数</div>
              <div class="value">
                {{ problemSource.dealCount || 0 }}<span>个</span>
              </div>
            </div>
          </div>
          <!-- 未处理总数 -->
          <div class="statistics-card">
            <div class="icon"></div>
            <div class="desc">
              <div class="name">未处理总数</div>
              <div class="value">
                {{ problemSource.notDealCount || 0 }}<span>个</span>
              </div>
            </div>
          </div>
        </div>
        <div class="chart-dom" ref="bar-chart"></div>
      </div>
    </div>

    <!-- 人员投入情况 -->
    <div class="item-container">
      <div class="header">人员投入情况</div>
      <div class="body">
        <div class="unit">单位：人</div>
        <div class="sub-title">
          投入总人数：<span>{{ staffSource.totalNum || 0 }}</span
          >人
        </div>
        <div class="chart-dom" ref="line-chart"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { axios } from "@/utils/request";
import echarts from "echarts";
export default {
  data() {
    return {
      investmentSource: {},
      problemSource: {},
      staffSource: {},
    };
  },
  mounted() {
    this.$nextTick((_) => {
      this.drawBarChart();
      this.drawLineChart();
    });
    this.getInvestmentData();
    this.getProblemData();
    this.getStaffStatics();
  },
  methods: {
    //投资情况
    getInvestmentData() {
      return new Promise((resolve, reject) => {
        axios
          .get(
            `/probusiness/bigScreen/investmentSituation`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.investmentSource = data ?? {};
            resolve();
          })
          .catch((_) => {
            this.investmentSource = {};
            reject();
          });
      });
    },

    //问题统计
    getProblemData() {
      return new Promise((resolve, reject) => {
        axios
          .get(
            `/probusiness/bigScreen/issueStatistics`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.problemSource = data ?? {};
            this.drawBarChart();
            resolve();
          })
          .catch((_) => {
            this.problemSource = {};
            reject();
          });
      });
    },

    //人员投入情况
    getStaffStatics() {
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/bigScreen/staffInputStatics`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.staffSource = res ?? {};
            this.drawLineChart();
            resolve();
          })
          .catch((_) => {
            this.staffSource = {};
            reject();
          });
      });
    },

    //问题统计
    drawBarChart() {
      let { totalList, dealList, notDealList } = this.problemSource;
      let chartDom = this.$refs["bar-chart"];
      let myChart = echarts.init(chartDom);
      let barWidth = 7;
      let option = {
        grid: {
          right: 30,
          top: 95,
          left: 70,
          bottom: 30,
        },
        legend: {
          top: 10,
          right: 26,
          itemGap: 20,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#B8F3FF",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "value",
          min: 0,
          minInterval: 1,
          axisLabel: {
            color: "#B8F3FF",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(219,241,255,0.3)",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(219,241,255,0.3)",
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: "category",
          data: ["安全问题", "质量问题"],
          axisLabel: {
            color: "#B8F3FF",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(219,241,255,0.3)",
            },
          },
        },
        series: [
          {
            name: "问题数",
            type: "bar",
            barWidth,
            data: [totalList?.[1] || 0, totalList?.[0] || 0],
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 213, 255, 0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 213, 255, 1)",
                    },
                  ],
                },
              },
            },
          },
          {
            name: "处理数",
            type: "bar",
            barWidth,
            data: [dealList?.[1] || 0, dealList?.[0] || 0],
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(85, 226, 115, 0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(85, 226, 115, 1)",
                    },
                  ],
                },
              },
            },
          },
          {
            name: "未处理数",
            type: "bar",
            barWidth,
            data: [notDealList?.[1] || 0, notDealList?.[0] || 0],
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255, 119, 119, 0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 119, 119, 1)",
                    },
                  ],
                },
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        myChart && myChart.resize();
      });
    },

    //人员投入情况
    drawLineChart() {
      let { x, y } = this.staffSource;
      let chartDom = this.$refs["line-chart"];
      let myChart = echarts.init(chartDom);
      let option = {
        grid: {
          right: 20,
          top: 60,
        },
        legend: {
          top: 35,
          right: 12,
          itemGap: 30,
          textStyle: {
            color: "#B8F3FF",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: x || [],
          axisLabel: {
            color: "#B8F3FF",
            rotate: 40,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(219,241,255,0.3)",
            },
          },
        },
        yAxis: {
          type: "value",
          splitNumber: 4,
          axisLabel: {
            color: "#B8F3FF",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(219,241,255,0.3)",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(219,241,255,0.3)",
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: y || [],
            type: "line",
            name: "人数",
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              normal: {
                color: "#FFA145",
              },
            },
            itemStyle: {
              color: "#FFA145",
              borderColor: "#FFDAB5",
              borderWidth: 2,
            },
          },
        ],
      };
      option && myChart.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        myChart && myChart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.rightStatistics-container {
  position: absolute;
  width: 400px;
  height: 100%;
  top: 0;
  right: 20px;
  box-sizing: border-box;
  padding: 110px 0 20px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  justify-content: space-between;
  .item-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    &:not(:last-child) {
      margin-bottom: 20px;
    }
    .header {
      height: 40px;
      flex-shrink: 0;
      background: url("~@/assets/img/portalEntry/icon_9.png");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      color: #eefaff;
      font-size: 18px;
      padding-left: 46px;
    }
    .body {
      border-radius: 0px 0px 0px 8px;
      border: 1px solid rgba(0, 213, 255, 0.4);
      background: rgba(5, 62, 74, 0.7);
      display: flex;
      overflow: hidden;
      border-top: none;
      flex: 1;
      position: relative;
      .unit {
        position: absolute;
        color: #b8f3ff;
        font-size: 14px;
        top: 10px;
        left: 16px;
      }
      .statistics-warp {
        position: absolute;
        display: flex;
        width: 100%;
        box-sizing: border-box;
        padding: 40px 0 0 16px;
        .statistics-card {
          display: flex;
          &:nth-child(1) {
            .icon {
              background: url("~@/assets/img/portalEntry/wenti_03.png");
              background-size: 100% 100%;
            }
          }
          &:nth-child(2) {
            margin: 0 20px;
            .icon {
              background: url("~@/assets/img/portalEntry/wenti_05.png");
              background-size: 100% 100%;
            }
          }
          &:nth-child(3) {
            .icon {
              background: url("~@/assets/img/portalEntry/wenti_07.png");
              background-size: 100% 100%;
            }
          }
          .icon {
            width: 38px;
            height: 38px;
            background: red;
            margin-right: 10px;
          }
          .desc {
            color: #b8f3ff;
            .name {
              margin-top: -3px;
            }
            .value {
              font-size: 16px;
              color: #00d5ff;
              span {
                color: #b8f3ff;
                font-size: 14px;
                margin-left: 2px;
              }
            }
          }
        }
      }

      //   <div class="statistics-warp">
      //       <!-- 问题总数 -->
      //       <div class="statistics-card">
      //         <div class="icon"></div>
      //         <div class="desc">
      //           <div class="name">问题总数</div>
      //           <div class="value">168<span>个</span></div>
      //         </div>
      //       </div>

      .sub-title {
        position: absolute;
        color: #b8f3ff;
        font-size: 14px;
        top: 10px;
        right: 16px;
        span {
          color: #ffa145;
          font-size: 16px;
        }
      }
      .chart-dom {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }
    //投资情况
    &.tzqk {
      .body {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        overflow: auto;
        align-items: center;
        .card {
          background: url("~@/assets/img/portalEntry/siyanse_03.png");
          background-size: 100% 100%;
          width: 182px;
          height: 96px;
          display: flex;
          flex-direction: column;
          align-items: center;
          &:nth-child(2) {
            background: url("~@/assets/img/portalEntry/siyanse_05.png");
          }
          &:nth-child(3) {
            background: url("~@/assets/img/portalEntry/siyanse_09.png");
          }
          &:nth-child(4) {
            background: url("~@/assets/img/portalEntry/siyanse_10.png");
          }
          .value {
            font-size: 30px;
            padding-top: 10px;
          }
          .name {
            font-size: 14px;
            color: #ffffff;
          }
          flex-shrink: 0;
          &:nth-child(1),
          &:nth-child(3) {
            margin-left: auto;
          }
          &:nth-child(2),
          &:nth-child(4) {
            margin-right: auto;
          }
          &:nth-child(1) {
            .value {
              color: #f18b1e;
            }
          }
          &:nth-child(2) {
            .value {
              color: #79e738;
            }
          }
          &:nth-child(3) {
            .value {
              color: #ad92f9;
            }
          }
          &:nth-child(4) {
            .value {
              color: #00f5de;
            }
          }
        }
      }
    }

    //问题统计

    //人员投入情况
  }
}
</style>
